<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<h1>Welcome! <input type="text" th:value="${#dates.format(datea,'yyyy-MM-dd hh:mm:ss')}"></input></h1>
<p th:text="${data}">

</p>
<ul id="ul">

</ul>

<input type="text" id="uid"/>
<input type="text" id="msg"/>
<input type="button" id="btn" onclick="send()" value="发送"/>
<script>
    // 打开一个 web socket
    var ws = new WebSocket("ws://localhost:8080/handler");

    ws.onopen = function()
    {
        // Web Socket 已连接上，使用 send() 方法发送数据
        var message = "发送数据";
        ws.send(message);
        $("#ul").append($("<li></li>").text("发送数据"))
    };

    ws.onmessage = function (evt)
    {
        var received_msg = evt.data;
        console.log(received_msg);
        $("#ul").append($("<li></li>").text(received_msg))
    };

    ws.onclose = function()
    {
        // 关闭 websocket
    };


    function send() {
            $.post("/send",
                {
                    uid:$("#uid").val(),
                    message:$("#msg").val()
                },
                function(data,status){
                    $("#ul").append($("<li></li>").text(data))
                });
    }
</script>
</body>
</html>